<template>
<div>
    <div class="Landao-fenlei">
        <h1>Hi, 小成1202</h1>
        <p>午后时光,给自己一些能量</p>
        <ul>
          <li v-for="(v,i) in arr" :key="i" @click="Dt=v.Dt">
              <img :src="v.imgb" alt="" ref="img">
              <p ref="p">{{v.text}}</p>
          </li>
        </ul>
    </div>
    <component :is="Dt" :data="arr"></component>
</div>
  
</template>

<script>
import Da from "com/Landao/dtai/da.vue"
import Db from "com/Landao/dtai/db.vue"
import Dc from "com/Landao/dtai/dc.vue"
export default {
    components:{
        Da,Db,Dc
    },
    data(){
        return{
            Dt:"Da",
            arr:[
                {
                    imgb:"/image/Sort/18.png",
                    text:"时令水果",
                    Dt:"Da",
                    imgd:"/image/Sort/6.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/19.png",
                    text:"乳品烘焙",
                    Dt:"Db",
                    imgd:"/image/Sort/7.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/20.png",
                    text:"零食雪糕",
                    Dt:"Dc",
                    imgd:"/image/Sort/8.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/21.png",
                    text:"酒水饮料",
                    imgd:"/image/Sort/9.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/22.png",
                    text:"餐饮熟食",
                    imgd:"/image/Sort/10.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/23.png",
                    text:"美护百货",
                    imgd:"/image/Sort/11.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/18.png",
                    text:"时令水果",
                    imgd:"/image/Sort/12.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/19.png",
                    text:"时令水果",
                    imgd:"/image/Sort/6.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/20.png",
                    text:"时令水果",
                    imgd:"/image/Sort/7.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/21.png",
                    text:"时令水果",
                    imgd:"/image/Sort/8.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
                {
                    imgb:"/image/Sort/22.png",
                    text:"时令水果",
                    imgd:"/image/Sort/9.jpg",
                    text1:"妃子笑荔枝 900g",
                    price2:"￥19.9",
                    text2:"/份"
                },
            ]
        }
    },
}
</script>

<style scoped>
    div{
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
    }
    .Landao-fenlei{
        width: 100%;
        height: 1.42rem;
        /* background-color: rgb(188, 248, 248); */
        background: url(/image/Sort/24.png);
        background-size: 100% 100%;
    }
    .Landao-fenlei>h1{
        font-size: 0.16rem;
        margin-top: 0.17rem;
        margin-bottom: 0.1rem;
        margin-left: 0.2rem;
    }
    .Landao-fenlei>p{
        font-size: 0.14rem;
        margin-bottom: 0.12rem;
        margin-left: 0.2rem;
    }
    .Landao-fenlei>ul{
        width: 100%;
        height: 0.805rem;
        /* background-color: beige; */
        overflow: auto;
        display: flex;
    }
    .Landao-fenlei>ul>li{
        width: 0.52rem;
        height: 100%;
        /* background-color: white; */
        text-align: center;
        margin-right: 0.05rem;
    }
    .Landao-fenlei>ul>li>img{
        width: 0.43rem;
        height: 0.43rem;
        border: 1px solid #52b0f8;
        border-radius: 50%;
        margin-top: 0.03rem;
        margin-bottom: 0.05rem;
    }
    .Landao-fenlei>ul>li>p{
        width: 0.52rem;
        /* color: #52b0f8; */
        /* font-weight: bold; */
        font-family: "黑体";
    }
    .Landao-fenlei>ul>li:nth-child(1){
        margin-left: 0.2rem;
    }
</style>